<template>
    <div class="avue-top">
        <div class="top-bar__left">
            <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]" v-if="setting.collapse&&!isHorizontal">
                <i class="icon-navicon" @click="setCollapse"></i>
            </div>
        </div>
        <div class="top-bar__title">
            <div class="top-bar__item top-bar__item--show" v-if="setting.menu">
                <top-menu ref="topMenu"></top-menu>
            </div>
            <span class="top-bar__item" v-if="setting.search">
                 <top-search></top-search>
           </span>
        </div>
        <!--  顶部按钮 -->
        <div class="top-bar__right">
            <!-- 主题颜色 -->
            <el-tooltip v-if="setting.color"
                        effect="dark"
                        :content="$t('navbar.color')"
                        placement="bottom">
                <div class="top-bar__item">
                    <top-color></top-color>
                </div>
            </el-tooltip>
            <!-- 日志 -->
            <el-tooltip v-if="setting.debug"
                        effect="dark"
                        :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')"
                        placement="bottom">
                <div class="top-bar__item">
                    <top-logs></top-logs>
                </div>
            </el-tooltip>
            <!-- 锁屏 -->
            <el-tooltip v-if="setting.lock"
                        effect="dark"
                        :content="$t('navbar.lock')"
                        placement="bottom">
                <div class="top-bar__item">
                    <top-lock></top-lock>
                </div>
            </el-tooltip>
            <!-- 主题 -->
            <el-tooltip v-if="setting.theme"
                        effect="dark"
                        :content="$t('navbar.theme')"
                        placement="bottom">
                <div class="top-bar__item top-bar__item--show">
                    <top-theme></top-theme>
                </div>
            </el-tooltip>
            <!-- 消息 -->
            <el-tooltip effect="dark"
                        :content="$t('navbar.notice')"
                        placement="bottom">
                <div class="top-bar__item top-bar__item--show">
                   <!-- <top-notice></top-notice>-->
                    <top-msg></top-msg>
                </div>
            </el-tooltip>
            <!-- 语言 -->
            <el-tooltip effect="dark"
                        :content="$t('navbar.language')"
                        placement="bottom">
                <div class="top-bar__item top-bar__item--show">
                    <top-lang></top-lang>
                </div>
            </el-tooltip>
            <!-- 全屏 -->
            <el-tooltip v-if="setting.fullscren"
                        effect="dark"
                        :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')"
                        placement="bottom">
                <div class="top-bar__item">
                    <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'"
                       @click="handleScreen"></i>
                </div>
            </el-tooltip>
            <!-- 头像-->
            <img class="top-bar__img" :src="userInfo.head">
            <!-- 下拉菜单  -->
            <el-dropdown>
                 <span class="el-dropdown-link">  {{userInfo.username}}
                     <i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                <el-dropdown-menu slot="dropdown">
                    <!--          <el-dropdown-item>-->
                    <!--            <router-link to="/">{{$t('navbar.dashboard')}}</router-link>-->
                    <!--          </el-dropdown-item>-->
                    <!--          <el-dropdown-item>-->
                    <!--            <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>-->
                    <!--          </el-dropdown-item>-->
                    <!--          <el-dropdown-item>-->
                    <!--            <router-link to="/info/setting">{{$t('navbar.setting')}}</router-link>-->
                    <!--          </el-dropdown-item>-->
                    <el-dropdown-item @click.native="logout"
                                      divided>{{$t('navbar.logOut')}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
    import {mapGetters} from "vuex";
    import {fullscreenToggel, listenfullscreen} from "@/util/util";
    import topLock from "./top-lock";
    import topMenu from "./top-menu";
    import topSearch from "./top-search";
    import topTheme from "./top-theme";
    import topLogs from "./top-logs";
    import topColor from "./top-color";
    import topNotice from './top-notice'
    import topMsg from './top-msg'
    import topLang from "./top-lang";

    export default {
        components: {
            topLock,
            topMenu,
            topSearch,
            topTheme,
            topLogs,
            topColor,
            topNotice,
            topMsg,
            topLang
        },
        name: "top",
        data() {
            return {};
        },
        filters: {},
        created() {
        },
        mounted() {
            listenfullscreen(this.setScreen);
        },
        computed: {
            ...mapGetters([
                "setting",
                "userInfo",
                "isFullScren",
                "tagWel",
                "tagList",
                "isCollapse",
                "tag",
                "logsLen",
                "logsFlag",
                "isHorizontal"
            ])
        },
        methods: {
            handleScreen() {
                fullscreenToggel();
            },
            setCollapse() {
                this.$store.commit("SET_COLLAPSE");
            },
            setScreen() {
                this.$store.commit("SET_FULLSCREN");
            },
            logout() {
                this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
                    confirmButtonText: this.$t("submitText"),
                    cancelButtonText: this.$t("cancelText"),
                    type: "warning"
                }).then(() => {
                    this.$store.dispatch("LogOut").then(() => {
                        this.$router.push({path: "/login"});
                    });
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
</style>